<template>
  <div class="resource">
    <img style="object-fit: contain" :draggable="false" :src="file.uri" v-if="file.type === '0'" />
    <video
      disablePictureInPicture
      controlslist="nodownload"
      v-else
      controls
      :src="file.uri"
      height="120"
    ></video>
  </div>
</template>

<script setup lang="ts">
import { Library } from "@/api/service/library/types";

defineProps<{
  file: Partial<Library>;
}>();
</script>

<style lang="scss" scoped>
.resource {
  border-bottom: 1px solid #ddd;
  @apply h-[120px] overflow-hidden p-2 w-full;

  &:hover {
    background: #f8f8f8;
  }

  img,
  video {
    width: 100%;
    height: 100%;
  }
}
</style>
